<template>
  <div class="detail">
    <Header></Header>
    <div class="loading" v-if="loading"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
    <div class="null" v-if="noInfo"><img src="../static/img/null.png" alt=""><p>暂时还没有景点的相关信息！</p></div>
    <div v-if="!noInfo">
      <div class="swiper_box" v-if="!loading">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in imgData01" :key="index">
            <img style="height: 230px;width: 100%;border-radius: 10px;display: block;" :src="item.siteImageUrl" class="index_img">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="action_box clearfix">
        <!--<a class="dh fl" :href="'http://api.map.baidu.com/geocoder?address='+$store.state.detailTitle +'&output=html'">
          <img src="../static/img/daohang0.png"/>
          <span>{{$t('m.map')}}</span>
        </a>-->
        <a href="javascript:;" @click="toMap" class="dh fl">
          <img src="../static/img/daohang0.png"/>
          <span>{{$t('m.map')}}</span>
        </a>
        <p class="action clearfix">
            <span :class="[{'on':zanStatus},'zan_bg']" @click="zan()">
              {{zan_count}}
            </span>
          <span :class="[{'on':storeStatus},'save_bg']" @click="save()">
              {{store_count}}
            </span>
        </p>
      </div>
      <div class="detail_box">
        <p v-if="showAll" class="text" >{{detailText}}</p>
        <p v-else  class="text" style="display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:11; white-space:pre-wrap;">{{detailText}}</p>
        <a v-if="detailText.length>=250" @click="showAll=true" v-show="!showAll" class="all_btn" href="javascript:;">{{$t('m.viewAll')}}</a>
      </div>
      <p class="block_title">{{$t('m.areaInfo')}}</p>
      <div class="info">
        <p class="info_title">{{$t('m.openTime')}}</p>
        <p class="info_text">{{ openTime }}</p>
      </div>
      <div class="info">
        <p class="info_title">{{$t('m.fare')}}</p>
        <p class="info_text">{{ ticketInfo }}</p>
      </div>
      <div class="info">
        <p class="info_title">{{$t('m.address')}}</p>
        <p class="info_text">{{ address }}</p>
      </div>
      <div class="info">
        <p class="info_title">{{$t('m.tel')}}</p>
        <p class="info_text">{{ tel }}</p>
      </div>
      <Media :videoTit="videoTit" :mediaSrc="mediaSrc" @playthissong="playthissong"></Media>
    </div>


  </div>
</template>

<script type="text/ecmascript-6">
  import Header from './comment/header/header.vue'
  import Media from './comment/media/media'
  import { MessageBox } from 'mint-ui';
  export default {
    data(){
      return{
        imgData01:[],
        openTime:'',
        ticketInfo:'',
        address:'',
        tel:'',
        loading:true,
        zan_count:'',
        store_count:'',
        zanStatus:false,
        storeStatus:false,
        swiperOption: {
          effect: 'coverflow',
          slidesPerView: 1.17,
          spaceBetween: 1,
//            height:100,
          coverflowEffect: {
            rotate: 0,
            stretch: -40,
            depth: 200,
            modifier: 1,
            slideShadows : true,
          },
          loop: true,
          loopAdditionalSlides : 1,
          slidesOffsetBefore : 0.3,
          pagination: '.swiper-pagination',
          centeredSlides: true,
          paginationClickable: true,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
//            this.page = swiper.realIndex+1;
//            this.index = swiper.realIndex;
          },
        },
        swiperSlides: [1, 2, 3, 4, 5],
        showAll:false,
        detailText:'',
        headTit:'',
        videoTit:'',
        mediaSrc:'',
        dt:'',
        noInfo:false
      }
    },
    components: {Header,Media},
    methods:{
      toMap(){
        this.$router.push('/map')
      },
      areaDetail(id){
        let that = this;
        that.$axios.get(this.$store.state.apiUrl+'site/getSite',{
          params: {
            siteId: id,
            userId:sessionStorage.getItem('userId'),
            lang:that.$i18n.locale,
          }
        })
          .then(function (res) {
            that.loading = false;
            console.log(res)
            if ( res.data.data ){
              let list = res.data.data[0].site;
              that.imgData01 = list.siteImages;
              if(that.$i18n.locale==='zh_cn'){
                that.detailText = (list.site_description).trim();
                that.$store.state.detailTitle = list.site_name;
                that.videoTit= list.site_name;
                that.openTime = list.open_time_info;
                that.ticketInfo = list.ticket_info;
                that.address = list.address;
              }else {
                that.detailText = (list.site_description_en).trim();
                that.$store.state.detailTitle = list.site_name_en;
                that.videoTit= list.site_name_en;
                that.openTime = list.open_time_info_en;
                that.ticketInfo = list.ticket_info_en;
                that.address = list.address_en;
              }
              that.mediaSrc= list.voiceDescriptionUrl;
              that.tel = list.advisor_phone;
              that.zan_count = list.zan_count;
              that.store_count = list.store_count;
              that.storeStatus = res.data.data[0].storeStatus;
              that.zanStatus = res.data.data[0].zanStatus;
            }else{
              that.noInfo = true;
            }
          })
          .catch(function (error) {
            console.log('获取热门城市失败');
          });
      },
      playthissong(i,index){
        console.log(i,index)
        this.areaDetail(i);
        this.$router.push('/areaDetail?id='+i+'')
      },
      //点赞
      zan(){
        let that = this;
        if( !that.zanStatus ){
          that.action('index/insertZan',function(){
            that.zanStatus = true;
            that.zan_count+=1;
          });
        }else{
          MessageBox.confirm('确定取消赞?').then(action => {
            that.action('index/deleteZan',function(){
              that.zanStatus = false;
              that.zan_count-=1;
            });
          }).catch(()=>{});
        }
      },
      //收藏
      save(){
        let that = this;
        if( !that.storeStatus ){
          that.action('index/insertStore',function(){
            that.storeStatus = true;
            that.store_count+=1;
          });
        }else{
          MessageBox.confirm('确定取消收藏?').then(action => {
            that.action('index/deleteStore',function(){
              that.storeStatus = false;
              that.store_count-=1;
            });
          }).catch(()=>{});
        }
      },
      action(url,fn){
        this.$axios.get(this.$store.state.apiUrl+url,{
          params:{
            user_id:sessionStorage.getItem('userId'),
            site_id:this.$route.query.id
          }
        })
          .then(function (res) {
            fn();
          })
          .catch(function (error) {
            console.log('操作失败');
          });
      },
      footRecord(){
      	let that = this;
        this.$axios.get(this.$store.state.apiUrl+'option/getTrack',{
          params:{
            siteId: that.$route.query.id,
            userId: sessionStorage.getItem('userId')
          }
        })
          .then(function (res) {
            //console.log(res)
          })
          .catch(function (error) {
            console.log('操作失败');
          });
        }
    },
    mounted(){
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.$store.state.showTab =  false;
    },
    created(){
      this.areaDetail(this.$route.query.id);
      this.footRecord();
    }
  };
</script>

<style scoped="scoped">
  .detail{padding-top: 0.64rem;padding-bottom: 1.4rem}
  .dh{display: block;background: #FFBF44; border-radius: 5px;margin-left: 0.3rem;width: 0.75rem;height: 0.25rem;line-height: 0.25rem;text-align: center;color: #fff;font-size: 0.1rem}
  .dh img{width: 0.1rem;display: inline-block;vertical-align: middle}
  .action_box{margin-bottom: 0.2rem}
  .action_box .action{margin-top: 0.05rem;margin-right: 0.3rem;float: right}
  .action_box .action img{width: 0.16rem;height: 0.14rem;margin-right: 0.07rem;float: left}
  .action_box .action span{font-size: 0.1rem;color: #999;line-height: 0.16rem;margin-right: 0.25rem;float: left}
  .detail_box{padding: 0 0.15rem}
  .detail_box .text{font-size: 0.14rem;color: #333333;line-height: 0.18rem;}
  .detail_box .text01{display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:11; white-space:pre-wrap;}
  .all_btn{width: 1.2rem;height: 0.35rem;line-height: 0.33rem;display: block;text-align: center;margin: 0.2rem auto 0;border: 1px solid #FFBF44;border-radius: 1rem; font-size: 0.16rem;color: #FFBF44;}
  .info{width: 100%;padding:0.05rem 0.15rem;color: #333;position: relative}
  .info:after{content: '';position: absolute;bottom: 0;height: 1px;left: 0.15rem;right: 0;background: #EDEDED;}
  .info .info_title{font-size: 0.14rem; color: #333333;line-height: 0.22rem;}
  .info .info_text{font-size: 0.12rem; color: #333333;line-height: 0.22rem}
</style>
